<template>
    <view class="sharinglaw bgf3f">
        <u-sticky>
            <view class="bgfff flex align_center jus_content pad_30 border_bottom relative" style="overflow: hidden;">
                <view class="sharinglaw_nav_item">
                    <u-icon label="所在地区" size="12" label-pos='left' label-color='#afafaf' label-size='29'
                        color="#afafaf" top='3' :name="!showCity ? 'arrow-down-fill' : 'arrow-up-fill'"
                        @click="showCity = true, visible = false"></u-icon>
                </view>

                <view class="sharinglaw_nav_item">
                    <u-icon label="法律专长" size="12" label-pos='left' label-color='#afafaf' label-size='29'
                        color="#afafaf" top='3' :name="!visible ? 'arrow-down-fill' : 'arrow-up-fill'"
                        @click="visible = !visible"></u-icon>
                </view>

                <view class="sharinglaw_nav_item">
                    <u-icon label="工作年限" size="12" label-pos='left' label-color='#afafaf' label-size='29'
                        color="#afafaf" top='3' :name="!showYear ? 'arrow-down-fill' : 'arrow-up-fill'"
                        @click="showYear = true, visible = false"></u-icon>
                </view>
            </view>

            <!-- 所在地区 -->
            <u-picker mode="region" v-model="showCity" :area-code='areaCode' :range="region" title="地区选择"
                @confirm="confirmCity"></u-picker>

            <!-- 律师专长 -->
            <app-dropDownMenu :list='pointList' :name='dropName' @data='getData' @activeIndex='activeIndex'
                @setVisible='setVisible' :actives='actives' :visible='visible' />

            <!-- 工作年限 -->
            <u-select v-model="showYear" mode="single-column" :default-value='defaultValue' :list="yearList"
                @confirm="confirmYear"></u-select>
        </u-sticky>

        <view>
            <view class="flex column padlr_30 bgfff">
                <scroll-view v-if="lawList.length != 0" style="height: calc(100vh - 0upx);" scroll-y
                    refresher-default-style="none" @scrolltolower="onButtomRefresh">
                    <view v-for="(item, index) in lawList" :key='index' class="sharinglaw_item"
                        @click="toLawDetail(item)">
                        <view class="sharinglaw_item_up">
                            <u-image :src="item.avatars" width="96upx" height="96upx" border-radius="50%" class="sharinglaw_item_img" v-if="item.avatars" />
                            <image src="../../static/image/icon/mine/3.png" v-else class="sharinglaw_item_img"></image>

                            <view class="sharinglaw_l_wid">
                                <view class="flex align_center">
                                    <view class="sharinglaw_item_name">{{item.lawyer_name}}</view>
                                    <view class="sharinglaw_item_tag">执业{{item.year}}年</view>
                                </view>

                                <view class="e73 size_28 mart_16 u-line-1">{{item.province}} {{item.city}}
                                    {{item.office_name}}
                                </view>
                            </view>
                        </view>

                        <view class="sharinglaw_item_down">
                            <view style="width: 96upx;">
                                <view class="flex align_center jus_center afa size_26">
                                    <view class="green_radius"></view>在线
                                </view>
                            </view>

                            <view class="sharinglaw_l_wid afa size_24 u-line-2">擅长：{{item.event}}</view>
                        </view>
                    </view>
                    <u-loadmore :status="status" @loadmore="onButtomRefresh" />
                </scroll-view>
                <view v-else class="default_no">
                    <image src="/static/image/icon/empty/15.png" class="empty_img"></image>
                    <view class="empty_font">暂无数据</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import dropDownMenu from 'components/drop-down-menu/drop-down-menu.vue'

    export default {
        data() {
            return {
                visible: false,
                show: true,
                showCity: false,
                showYear: false,
                dropName: 'name',
                selectValue: '',
                selectId: '',
                event_id: '',
                region: [],
                actives: 0,
                lawList: [],
                pointList: [],
                areaCode: [],
                city: '',
                defaultValue: [0],
                yearList: [{
                        value: '1',
                        label: '1-3年'
                    },
                    {
                        value: '2',
                        label: '3-5年'
                    },
                    {
                        value: '3',
                        label: '5-10年'
                    },
                    {
                        value: '4',
                        label: '10年以上'
                    }
                ],
                total: 0,
                page_num: 10, // 每页条数
                page: 1, // 页码
                status: 'loadmore',
            }
        },
        components: {
            'app-dropDownMenu': dropDownMenu
        },
        onReachBottom() {
            console.log('onReachBottom')
        },
        onLoad() {
            this.getEvent()

            this.getAllLawyer()
        },
        methods: {
            toLawDetail(item) {
                uni.navigateTo({
                    url: '../lawDetails/lawdetails?id=' + item.id
                })
            },
            // 获取案件类型
            async getEvent() {
                const {
                    data
                } = await this.$u.get(this.$restUrl.getEvent)
                this.pointList = data || []
            },
            confirmCity(obj) {
                this.city = obj.city.label

                this.areaCode = [obj.province.value, obj.city.value, obj.area.value]

                this.page = 1
                this.lawList = []
                this.status = 'loadmore'
                this.getAllLawyer()
            },
            confirmYear(data) {
                this.selectValue = data[0].label
                this.selectId = data[0].value

                this.yearList.map((item, index) => {
                    if (item.value == this.selectId) {
                        this.defaultValue = [index]
                    }
                })

                this.page = 1
                this.lawList = []
                this.status = 'loadmore'
                this.getAllLawyer()
            },
            setVisible(bol) {
                this.visible = bol
            },
            activeIndex(index) {
                this.actives = index
            },
            getData(data) {
                this.event_id = data.id

                this.page = 1
                this.lawList = []
                this.status = 'loadmore'
                this.getAllLawyer()
            },
            // 律师列表
            async getAllLawyer() {
                const year = this.selectId == '' ? '' : this.selectId == 1 ? '1,2,3' : this.selectId == 2 ?
                    '3,4,5' :
                    this.selectId == 3 ? '5,6,7,8,9,10' : this.selectId == 4 ? '10,11,12' : ''

                const {
                    data
                } = await this.$u.post(this.$restUrl.getAllLawyer, {
                    event_id: this.event_id.toString(),
                    year,
                    city: this.city,
                    page_num: this.page_num,
                    page: this.page,
                })
                console.log(data)
                this.total = data.total
                this.lawList.push(...data.data)
                this.status = 'loadmore';
            },
            // 底部刷新
            onButtomRefresh() {
                console.log("onButtomRefresh")
                this.status = 'loading';
                if (this.page * this.page_num >= this.total) {
                    this.status = 'nomore'
                    return 
                }
                this.page++
                this.getAllLawyer()
            },
        }
    }
</script>

<style scoped lang="scss">
    @import "./sharinglaw.scss";
</style>
